<template>
  <div class="w-full p-10 bg-[#f6f6f6]" id="div-1">
    <a-row :gutter="24" id="a-row-2">
      <a-col :span="6" id="a-col-3">
        <a-card class="bg-[#eff2fa] rounded-xl overflow-hidden" id="a-card-4">
          <a-image :preview="false" src="https://picsum.photos/id/11/200/270" width="100%" class id="a-image-5" />
          <a-typography-link href="#" class="block px-5 py-1 pb-5 bg-[#fff]" id="a-typography-link-6">
            <a-typography-title :level="5" id="a-typography-title-7"> 旗袍匠人 </a-typography-title>
            <a-typography-text class="line-clamp-1" id="a-typography-text-8"
              >荣盛旗袍百年老店第二代传人盛国华二代传人盛国华二代传人盛国华二代传人盛国华</a-typography-text
            >
          </a-typography-link>
          <a-flex class="p-5" justify="center" id="a-flex-9">
            <a-typography-text
              class="w-5 h-5 rounded-full bg-[rgba(108,104,119,0.2)] mr-2 ml-[20%]"
              id="a-typography-text-10"
            ></a-typography-text>
            <a-typography-text class="w-5 h-5 rounded-full bg-[rgba(108,104,119,0.2)] mr-2" id="a-typography-text-11"></a-typography-text>
            <a-typography-text class="w-5 h-5 rounded-full bg-[rgba(108,104,119,0.5)] mr-2" id="a-typography-text-12"></a-typography-text>
          </a-flex>
        </a-card>
      </a-col>
      <a-col :span="12" id="a-col-13">
        <a-typography-paragraph
          v-for="(item, index) in dataList1"
          :key="index"
          class="border-0 border-solid border-b-[1px] border-[#efefef] py-3 !mb-0"
          :id="`a-typography-paragraph-14-${index}`"
        >
          <a-typography-title :level="5" class="w-full text-center" :id="`a-typography-title-15-${index}`">
            {{ item.title }}
          </a-typography-title>
          <a-typography-link href="#" class="!text-[#999]" :id="`a-typography-link-16-${index}`">
            {{ item.text }}
            <a-typography-text class="text-[#f483a7]" :id="`a-typography-text-17-${index}`">[阅读]</a-typography-text>
            <a-typography-text class="text-[#f483a7]" :id="`a-typography-text-18-${index}`">[收藏]</a-typography-text>
          </a-typography-link>
        </a-typography-paragraph>
        <a-flex wrap="wrap" id="a-flex-19">
          <a-typography-link
            href="#"
            v-for="(item, index) in dataList2"
            :key="index"
            class="w-[50%] !text-[#999] mt-3"
            :id="`a-typography-link-20-${index}`"
          >
            {{ item }}</a-typography-link
          >
        </a-flex>
      </a-col>
      <a-col :span="6" id="a-col-21">
        <a-card class="bg-[#ffeff6] rounded-xl overflow-hidden p-4 border-1 border-solid border-[#f483a7] h-full" id="a-card-22">
          <a-typography-title :level="5" class="!text-[#b1afaf]" id="a-typography-title-23">人气榜单 TOP</a-typography-title>
          <a-list id="a-list-24">
            <a-list-item v-for="(item, index) in dataList3" :key="index" class="!p-0 !mb-0 !pb-1" :id="`a-list-item-25-${index}`">
              <a-typography-link href="#" class="!text-[#999]" :id="`a-typography-link-26-${index}`">
                <a-typography-text
                  class="rounded-full px-1 bg-[#f483a7] text-[#fff]"
                  :class="index > 2 ? '!bg-[#aeacac]' : ''"
                  :id="`a-typography-text-27-${index}`"
                  >{{ item.index }}</a-typography-text
                >
                {{ item.text }}
              </a-typography-link>
            </a-list-item>
            <a-list-item class="!p-0 !mb-0 !pb-1" id="a-list-item-28">
              <a-typography-link href="#" class="!text-[#aeacac]" id="a-typography-link-29">查看更多</a-typography-link>
            </a-list-item>
          </a-list>
          <a-typography-title :level="5" class="!text-[#b4b1b1] text-right" id="a-typography-title-30">香网新闻 NEWS</a-typography-title>
          <a-typography-paragraph
            class="mt-2"
            :ellipsis="{ rows: 1, expandable: true }"
            content="第五届网络文学奖征集公告第五届网络文学奖征集公告第五届网络文学奖征集公告第五届网络文学奖征集公告"
            id="a-typography-paragraph-31"
          >
            <template #ellipsisSymbol>
              <a-typography-link href="#" class="!text-[#999]" id="a-typography-link-32">
                详情<DoubleRightOutlined id="doublerightoutlined-33"></DoubleRightOutlined>
              </a-typography-link>
            </template>
          </a-typography-paragraph>
        </a-card>
      </a-col>
    </a-row>
    <a-typography-link href="#" class="block w-full py-4" id="a-typography-link-34">
      <a-image :preview="false" src="https://picsum.photos/id/12/1200/100" width="100%" class="rounded-xl" id="a-image-35" />
    </a-typography-link>
    <a-card class="w-full rounded-xl overflow-hidden border-1 border-solid border-[#f483a7]" id="a-card-36">
      <a-flex class="bg-[#f497ad] py-3 px-5" justify="space-between" id="a-flex-37">
        <a-typography-title :level="4" class="!text-[#fff] text-right !mb-0" id="a-typography-title-38">女生频道</a-typography-title>
        <a-space id="a-space-39">
          <template v-for="(item, index) in dataList4" :key="index">
            <a-badge color="#fff" v-if="index !== 0" :id="`a-badge-40-${index}`" />
            <a-typography-link href="#" class="!text-[#fff] mr-1" :id="`a-typography-link-41-${index}`">{{ item }}</a-typography-link>
          </template>
        </a-space>
      </a-flex>
      <a-row id="a-row-42">
        <a-col :span="7" id="a-col-43">
          <a-tabs :activeKey="0" type="card" id="a-tabs-44">
            <template #renderTabBar>
              <a-flex class="bg-[#e4e4e4] mb-4" align="center" id="a-flex-45">
                <a-typography-text
                  class="text-lg block px-2 py-2 text-center bg-[#e5e5e5] text-[#999]"
                  :class="index === 0 ? 'text-[#f483a7] w-[40%]  !bg-[#fff] text-xl' : 'w-[60%]'"
                  v-for="(item, index) in dataList5"
                  :key="index"
                  :id="`a-typography-text-46-${index}`"
                >
                  {{ item.category }}
                </a-typography-text>
              </a-flex>
            </template>
            <a-tab-pane v-for="(item, index) in dataList5" :key="index" :id="`a-tab-pane-47-${index}`">
              <a-list class="px-4 mb-4" :id="`a-list-48-${index}`">
                <a-list-item
                  v-for="(item1, index1) in item.list"
                  :key="index1"
                  class="!p-0 !mb-0 !py-1"
                  :id="`a-list-item-49-${index}-${index1}`"
                >
                  <a-typography-link href="#" class="!text-[#999] line-clamp-1" :id="`a-typography-link-50-${index}-${index1}`">
                    <a-typography-text
                      class="rounded-full px-1 bg-[#f483a7] text-[#fff]"
                      :class="index1 > 2 ? '!bg-[#aeacac]' : ''"
                      :id="`a-typography-text-51-${index}-${index1}`"
                    >
                      {{ item1.index }}
                    </a-typography-text>
                    {{ item1.text }}
                  </a-typography-link>
                  <a-typography-text class="whitespace-nowrap ml-2 text-[#999]" :id="`a-typography-text-52-${index}-${index1}`">{{
                    item1.num
                  }}</a-typography-text>
                </a-list-item>
                <a-list-item class="!p-0 !mb-0 !py-1" :id="`a-list-item-53-${index}`">
                  <a-typography-link
                    href="#"
                    class="!text-[#f483a7] !py-1 block w-full border-0 border-solid !border-b-[1px] !border-[#efefef]"
                    :id="`a-typography-link-54-${index}`"
                    >查看更多</a-typography-link
                  >
                </a-list-item>
              </a-list>
            </a-tab-pane>
          </a-tabs>
        </a-col>
        <a-col :span="10" id="a-col-55">
          <div class="px-6" id="div-56">
            <a-typography-title :level="5" class="w-full py-4 !mb-0" id="a-typography-title-57">
              精品推荐
              <a-typography-link href="#" class="!text-[#333] float-right" id="a-typography-link-58">
                更多 <PlusOutlined id="plusoutlined-59"></PlusOutlined
              ></a-typography-link>
            </a-typography-title>
            <a-divider class="!mt-0" id="a-divider-60" />
            <a-row :gutter="[0, 12]" id="a-row-61">
              <a-col :span="12" v-for="(item, index) in dataList6" :key="index" :id="`a-col-62-${index}`">
                <a-flex :id="`a-flex-63-${index}`">
                  <a-image :preview="false" :src="item.img" width="45%" class="!h-full" :id="`a-image-64-${index}`" />
                  <div class="pl-2 w-[55%]" :id="`div-65-${index}`">
                    <a-typography-link href="#" class="block font-bold !text-[#333]" :id="`a-typography-text-66-${index}`">{{
                      item.title
                    }}</a-typography-link>
                    <a-typography-text class="block font-bold mb-4" :id="`a-typography-text-67-${index}`"
                      >作者：{{ item.auth }}</a-typography-text
                    >
                    <a-typography-link
                      href="#"
                      class="block bg-[#f497ad] w-[80%] text-center rounded-full py-1 !text-[#fff] mb-1"
                      :id="`a-typography-link-68-${index}`"
                    >
                      开始阅读
                    </a-typography-link>
                    <a-typography-link
                      href="#"
                      class="block bg-[#00a494] w-[80%] text-center rounded-full py-1 !text-[#fff] mb-1"
                      :id="`a-typography-link-69-${index}`"
                    >
                      收藏本书
                    </a-typography-link>
                  </div>
                </a-flex>
                <a-typography-link href="#" class="!text-[#999] line-clamp-2" :id="`a-typography-link-70-${index}`">{{
                  item.text
                }}</a-typography-link>
              </a-col>
            </a-row>
          </div>
        </a-col>
        <a-col :span="7" id="a-col-71">
          <a-tabs :activeKey="0" type="card" id="a-tabs-72">
            <template #leftExtra>
              <div class="bg-[#e5e5e5] px-10 py-1 text-xl" id="div-73"> 收藏榜 </div>
            </template>
            <template #renderTabBar>
              <a-flex class="bg-[#e4e4e4] mb-4" justify="end" id="a-flex-74">
                <a-typography-text class="w-full block px-2 py-2 text-xl ml-auto" id="a-typography-text-75"> 收藏榜 </a-typography-text>
                <a-typography-text
                  class="text-xl block px-2 py-2 text-[#999]"
                  :class="index === 0 ? 'text-[#f483a7] bg-[#ffff]' : ''"
                  v-for="(item, index) in dataList7"
                  :key="index"
                  :id="`a-typography-text-76-${index}`"
                >
                  {{ item.category }}
                </a-typography-text>
              </a-flex>
            </template>
            <a-tab-pane v-for="(item, index) in dataList7" :key="index" :id="`a-tab-pane-77-${index}`">
              <a-list class="px-4 mb-4" :id="`a-list-78-${index}`">
                <a-list-item
                  v-for="(item1, index1) in item.list"
                  :key="index1"
                  class="!p-0 !mb-0"
                  :id="`a-list-item-79-${index}-${index1}`"
                >
                  <a-typography-link href="#" class="flex w-full" v-if="index1 === 0" :id="`a-typography-link-80-${index}-${index1}`">
                    <a-typography-text
                      class="block w-7 h-5 rounded-full px-1 bg-[#f483a7] text-[#fff] mr-1 text-center"
                      :class="index1 > 2 ? '!bg-[#aeacac]' : ''"
                      :id="`a-typography-text-81-${index}-${index1}`"
                    >
                      {{ item1.index }}
                    </a-typography-text>
                    <a-image :preview="false" :src="item1.img" width="30%" :id="`a-image-82-${index}-${index1}`" />
                    <div class="pl-2 w-[60%]" :id="`div-83-${index}-${index1}`">
                      <a-typography-text class="block mt-1 font-bold" :id="`a-typography-text-84-${index}-${index1}`">{{
                        item1.text
                      }}</a-typography-text>
                      <a-typography-text class="block mt-2 text-[#999]" :id="`a-typography-text-85-${index}-${index1}`"
                        >作者：{{ item1.auth }}</a-typography-text
                      >
                      <a-typography-text class="block mt-2 text-[#999]" :id="`a-typography-text-86-${index}-${index1}`"
                        >分类：{{ item1.type }}</a-typography-text
                      >
                    </div>
                  </a-typography-link>
                  <a-typography-link href="#" class="!text-[#999] line-clamp-1 py-1" v-else :id="`a-typography-link-87-${index}-${index1}`">
                    <a-typography-text
                      class="rounded-full px-1 bg-[#f483a7] text-[#fff]"
                      :class="index1 > 2 ? '!bg-[#aeacac]' : ''"
                      :id="`a-typography-text-88-${index}-${index1}`"
                    >
                      {{ item1.index }}
                    </a-typography-text>
                    {{ item1.text }}
                  </a-typography-link>
                </a-list-item>
                <a-list-item class="!p-0 !mb-0 !py-1" :id="`a-list-item-89-${index}`">
                  <a-typography-link
                    href="#"
                    class="!text-[#999] !py-1 block w-full border-0 border-solid !border-b-[1px] !border-[#efefef]"
                    :id="`a-typography-link-90-${index}`"
                    >查看更多</a-typography-link
                  >
                </a-list-item>
              </a-list>
            </a-tab-pane>
          </a-tabs>
        </a-col>
      </a-row>
    </a-card>
    <a-typography-link href="#" class="block w-[35%] py-4" id="a-typography-link-91"
      ><a-image :preview="false" src="https://picsum.photos/id/12/400/100" width="100%" class="rounded-xl" id="a-image-92"
    /></a-typography-link>
    <a-row :gutter="24" id="a-row-93">
      <a-col :span="6" id="a-col-94">
        <a-card
          :bordered="false"
          class="border-1 border-t-4 border-solid border-[#ff5860] rounded-xl overflow-hidden h-full"
          id="a-card-95"
        >
          <a-typography-title :level="5" class="text-center py-2 !mb-0 bg-[#ff5860] !text-[#fff]" id="a-typography-title-96">
            本周热门
          </a-typography-title>
          <a-list class="px-4 m-1 bg-[#fff] pt-4" id="a-list-97">
            <a-list-item v-for="(item, index) in dataList8" :key="index" class="!p-0 !mb-0" :id="`a-list-item-98-${index}`">
              <a-typography-link href="#" class="flex w-full" v-if="index === 0" :id="`a-typography-link-99-${index}`">
                <a-typography-text
                  class="block w-7 h-5 rounded-full px-1 bg-[#f483a7] text-[#fff] mr-1 text-center"
                  :class="index > 2 ? '!bg-[#aeacac]' : ''"
                  :id="`a-typography-text-100-${index}`"
                >
                  {{ item.index }}
                </a-typography-text>
                <a-image :preview="false" :src="item.img" width="30%" :id="`a-image-101-${index}`" />
                <div class="pl-2 w-[60%]" :id="`div-102-${index}`">
                  <a-typography-text class="block mt-1 font-bold" :id="`a-typography-text-103-${index}`">{{ item.text }}</a-typography-text>
                  <a-typography-text class="block mt-2 text-[#999]" :id="`a-typography-text-104-${index}`"
                    >作者：{{ item.auth }}</a-typography-text
                  >
                  <a-typography-text class="block mt-2 text-[#999]" :id="`a-typography-text-105-${index}`"
                    >分类：{{ item.type }}</a-typography-text
                  >
                </div>
              </a-typography-link>
              <a-typography-link href="#" class="!text-[#999] line-clamp-1 py-1" v-else :id="`a-typography-link-106-${index}`">
                <a-typography-text
                  class="rounded-full px-1 bg-[#f483a7] text-[#fff]"
                  :class="index > 2 ? '!bg-[#aeacac]' : ''"
                  :id="`a-typography-text-107-${index}`"
                >
                  {{ item.index }}
                </a-typography-text>
                {{ item.text }}
              </a-typography-link>
            </a-list-item>
            <a-list-item class="!p-0 !mb-0 !py-1" id="a-list-item-108">
              <a-typography-link
                href="#"
                class="!text-[#f483a7] !py-1 block w-full border-0 border-solid !border-b-[1px] !border-[#efefef]"
                id="a-typography-link-109"
                >查看更多</a-typography-link
              >
            </a-list-item>
          </a-list>
        </a-card>
      </a-col>
      <a-col :span="12" id="a-col-110">
        <a-card class="border-1 border-t-4 border-solid border-[#ff5860] rounded-xl overflow-hidden h-full" id="a-card-111">
          <a-typography-title :level="5" class="w-full py-2 !mb-0 !text-[#ff5860] px-3" id="a-typography-title-112">
            古言<a-badge color="#ff5860" id="a-badge-113" />穿越
            <a-typography-link href="#" class="!text-[#ff5860] float-right text-lg" id="a-typography-link-114">
              最新上架
            </a-typography-link>
          </a-typography-title>
          <a-divider class="!mt-0" id="a-divider-115" />
          <a-flex justify="space-between" id="a-flex-116">
            <a-list class="px-4 w-[65%]" :split="false" id="a-list-117">
              <a-list-item
                v-for="(item, index) in dataList9"
                :key="index"
                class="!p-0 mb-3 my-1 !justify-start"
                :id="`a-list-item-118-${index}`"
              >
                <a-image :preview="false" :src="item.img" width="25%" :id="`a-image-119-${index}`" />
                <div class="ml-4 w-[70%]" :id="`div-120-${index}`">
                  <a-typography-link href="#" class="block font-bold text-xl !text-[#ff5860] mb-2" :id="`a-typography-text-121-${index}`">
                    {{ item.title }}
                  </a-typography-link>
                  <a-typography-paragraph
                    class="text-[#999] !mb-0"
                    :ellipsis="{ rows: 4, expandable: true }"
                    :content="item.text"
                    :id="`a-typography-paragraph-122-${index}`"
                  >
                    <template #ellipsisSymbol>
                      <a-typography-link href="#" class="!text-[#ff5860] mr-4" :id="`a-typography-link-123-${index}`">
                        查看详细...</a-typography-link
                      >
                    </template>
                  </a-typography-paragraph>
                </div>
              </a-list-item>
            </a-list>
            <a-list class="px-4 mb-4 w-[30%]" :split="false" id="a-list-124">
              <a-list-item v-for="(item, index) in dataList10" :key="index" class="!p-0" :id="`a-list-item-125-${index}`">
                <a-typography-link
                  href="#"
                  class="!text-[#999] border-0 border-solid !border-b-[1px] !border-[#efefef] w-full block py-1"
                  ellipsis
                  :id="`a-typography-link-126-${index}`"
                  >{{ item }}</a-typography-link
                >
              </a-list-item>
            </a-list>
          </a-flex>
        </a-card>
      </a-col>
      <a-col :span="6" id="a-col-127">
        <a-tabs
          :activeKey="0"
          type="card"
          class="border-1 border-solid border-[#ff5860] rounded-xl overflow-hidden h-full bg-[#fff]"
          id="a-tabs-128"
        >
          <template #renderTabBar>
            <a-flex class="bg-[#e4e4e4] mb-4" align="center" id="a-flex-129">
              <a-typography-text
                class="block px-2 py-2 text-center bg-[#e5e5e5] text-[#999] w-[50%]"
                :class="index === 0 ? 'text-[#fff] w-[40%]  !bg-[#ff5860] text-xl' : ''"
                v-for="(item, index) in dataList11"
                :key="index"
                :id="`a-typography-text-130-${index}`"
              >
                {{ item.category }}
              </a-typography-text>
            </a-flex>
          </template>
          <a-tab-pane v-for="(item, index) in dataList11" :key="index" :id="`a-tab-pane-131-${index}`">
            <a-list class="px-4 mb-4" :id="`a-list-132-${index}`">
              <a-list-item v-for="(item1, index1) in item.list" :key="index1" class="!p-0 !mb-0" :id="`a-list-item-133-${index}-${index1}`">
                <a-typography-link href="#" class="flex w-full" v-if="index1 === 0" :id="`a-typography-link-134-${index}-${index1}`">
                  <a-typography-text
                    class="block w-7 h-5 rounded-full px-1 bg-[#f483a7] text-[#fff] mr-1 text-center"
                    :class="index1 > 2 ? '!bg-[#aeacac]' : ''"
                    :id="`a-typography-text-135-${index}-${index1}`"
                  >
                    {{ item1.index }}
                  </a-typography-text>
                  <a-image :preview="false" :src="item1.img" width="30%" :id="`a-image-136-${index}-${index1}`" />
                  <div class="pl-2 w-[60%]" :id="`div-137-${index}-${index1}`">
                    <a-typography-text class="block mt-1 font-bold" :id="`a-typography-text-138-${index}-${index1}`">{{
                      item1.text
                    }}</a-typography-text>
                    <a-typography-text class="block mt-2 text-[#999]" :id="`a-typography-text-139-${index}-${index1}`"
                      >作者：{{ item1.auth }}</a-typography-text
                    >
                    <a-typography-text class="block mt-2 text-[#999]" :id="`a-typography-text-140-${index}-${index1}`"
                      >分类：{{ item1.type }}</a-typography-text
                    >
                  </div>
                </a-typography-link>
                <a-typography-link href="#" class="!text-[#999] line-clamp-1 py-1" v-else :id="`a-typography-link-141-${index}-${index1}`">
                  <a-typography-text
                    class="rounded-full px-1 bg-[#f483a7] text-[#fff]"
                    :class="index1 > 2 ? '!bg-[#aeacac]' : ''"
                    :id="`a-typography-text-142-${index}-${index1}`"
                  >
                    {{ item1.index }}
                  </a-typography-text>
                  {{ item1.text }}
                </a-typography-link>
              </a-list-item>
              <a-list-item class="!p-0 !mb-0 !py-1" :id="`a-list-item-143-${index}`">
                <a-typography-link
                  href="#"
                  class="!text-[#f483a7] !py-1 block w-full border-0 border-solid !border-b-[1px] !border-[#efefef]"
                  :id="`a-typography-link-144-${index}`"
                  >查看更多</a-typography-link
                >
              </a-list-item>
            </a-list>
          </a-tab-pane>
        </a-tabs>
      </a-col>
    </a-row>
  </div>
</template>



<script setup>
const dataList1 = [
  {
    title: '木雕女孩家乡魂',
    text: '从小被父亲忽视的林兮，在父亲中风，大哥身败名裂的状况下，不得不接手家族传承。可令她没想到的是，困难比想象的要大且多。木雕行情不乐观、优秀学徒不足，以及',
  },
  {
    title: '孩子，别哭',
    text: '关于一位农村女大学生的创业史和爱情史——贫穷女孩周希茹，受国家资助读书毕业后，回报家乡。为特殊儿童提供了求学机会，在高智商同事裴清卓的帮助下，一起筹钱',
  },
  {
    title: '武林天骄(简体)',
    text: '本书是梁羽生的晚期代表作。故事以宋金对峙的历史为大背景，围绕主角“武林天骄”檀羽冲独特的身份、曲折的历程展开。檀羽冲的母亲是民族 英雄岳飞的外孙女，',
  },
  {
    title: '塞外奇侠传(简体)',
    text: '明代忠臣之后杨云骢，自幼跟天山派晦明禅师学艺，后下山助新疆哈萨克牧民抵抗清军侵略，赢得侠名。杨云骢在一次沙漠混战中受伤，为满洲纳兰秀吉将军的女儿纳',
  },
];
const dataList2 = ['医途与你皆有', '樱花盛开就相爱', '子期可期'];
const dataList3 = [
  { text: '恶犬', index: '01' },
  { text: '我的同事都在暗恋我', index: '02' },
  { text: '跪舔东国太子爷，二嫁影帝幸福了', index: '03' },
  { text: '恶毒少奶奶别吻我', index: '04' },
  { text: '狂女重生：纨绔七皇妃', index: '05' },
  { text: '天才萌宝毒医娘亲', index: '06' },
  { text: '最强五小姐', index: '07' },
  { text: '天才小毒妃', index: '08' },
  { text: '总裁误宠替身甜妻', index: '09' },
  { text: '至尊狂妻，极品废材小姐', index: '10' },
];
const dataList4 = ['穿越言情', '古代言情', '都市言情', '校园言情', '玄幻仙侠', '明星同人'];
const dataList5 = [
  {
    category: '热门连载',
    list: [
      { text: '七零万人嫌，嫁退伍军官后多胎了', index: '01', num: '更新：5.3万' },
      { text: '替嫁三年抱两，堂姐眼红哭了', index: '02', num: '更新：5.2万' },
      { text: '为奴三年，不原谅！整个侯府悔断肠', index: '03', num: '更新：4.5万' },
      { text: '随军两年不同房，军婚也得离', index: '04', num: '更新：4.5万' },
      { text: '小奶团超凶，靠抓鬼富养六个爷爷', index: '05', num: '更新：4.3万' },
      { text: '父子齐跪求原谅？滚，挡我震边关了', index: '06', num: '' },
      { text: '七零大院，最强军少娶了个人嫌', index: '07', num: '更新：4.3万' },
      { text: '真千金从修真界杀回来了', index: '08', num: '4.2万更新：4.2万' },
      { text: '穿成兽世万人嫌，雄性们都抢疯了', index: '09', num: '更新：3.8万' },
      { text: '闺蜜成敌？她马开你们三个过吧', index: '10', num: '更新：3.2万' },
      { text: '重生！渣女？我马甲一脱都别活', index: '11', num: '更新：3.2万' },
      { text: '穿成国公老夫人后我把不孕孙儿全踹了', index: '12', num: '更新：3.1万' },
      { text: '渣男为白月光抽女儿骨髓，我杀疯了', index: '13', num: '更新：2.9万' },
    ],
  },
  {
    category: '人气新书',
  },
];
const dataList6 = [
  {
    img: 'https://picsum.photos/id/31/100/130',
    title: '《鸣镝风云录上册(简体)》',
    auth: '梁羽生',
    text: '“珠蘼半卷香车过，响箭连..',
  },
  {
    img: 'https://picsum.photos/id/32/100/130',
    title: '《鸣镝风云录下册(简体)》',
    auth: '梁羽生',
    text: '“珠蘼半卷香车过，响箭连..',
  },
  {
    img: 'https://picsum.photos/id/33/100/130',
    title: '《狂侠天骄魔女上册(简体)》',
    auth: '梁羽生',
    text: '小说以宋金两国在采石矶的战斗为历史背景，描述了生活在金人统治地区的侠女…',
  },
  {
    img: 'https://picsum.photos/id/34/100/130',
    title: '《狂侠天骄魔女下册(简体)》',
    auth: '梁羽生',
    text: '小说以宋金两国在采石矶的战斗为历史背景，描述了生活在金人统治…',
  },
];
const dataList7 = [
  {
    category: '周',
    list: [
      { text: '《天才小毒妃》', index: '01', num: '', img: 'https://picsum.photos/id/41/50/55', auth: '芥末', type: '加工小说' },
      { text: '王牌女助', index: '02', num: '' },
      { text: '黑凰后', index: '03', num: '' },
      { text: '错嫁当天，豪门继承人拉着我领证', index: '04', num: '' },
      { text: '婚到浓时，总裁请淡定', index: '05', num: '' },
      { text: '千亿新娘，总裁大人请温柔', index: '06', num: '' },
      { text: '诱爱成婚，腹黑老公难招架', index: '07', num: '' },
      { text: '神厨狂后', index: '08', num: '' },
      { text: '王爷驾到：萌妃吐槽请稍后', index: '09', num: '' },
      { text: '总裁误宠替身甜妻', index: '10', num: '' },
      { text: '一笙有喜', index: '11', num: '' },
    ],
  },
  {
    category: '月',
  },
  {
    category: '总',
  },
];
const dataList8 = [
  { text: '《闪婚总裁契约妻》', index: '01', img: 'https://picsum.photos/id/51/50/55', auth: '拈花拂柳', type: '穿越小说' },
  { text: '娇女毒妃', index: '02' },
  { text: '可恶！黑道大姐大怎么成了京城厨神', index: '03' },
  { text: '神医王妃不好惹', index: '04' },
  { text: '神厨狂后', index: '05' },
  { text: '农门神医', index: '06' },
  { text: '鲜辣厨娘：丞相请品尝', index: '07' },
  { text: '毒女狂妃，这个王爷太妻奴', index: '08' },
  { text: '侯爷，夫人超凶得宠着', index: '09' },
  { text: '穿成反派崽崽们的恶毒后娘', index: '10' },
  { text: '天降系统：农门小富婆', index: '11' },
];
const dataList9 = [
  {
    img: 'https://picsum.photos/id/91/100/145',
    title: '神厨狂后',
    text: '穿越前，她是二十一世纪令人闻风丧胆的黑道杀手。她擅长的是刺杀术、伪装术、遁地术。穿越后，她是北刺杀术、伪装术、遁地术。穿越后，她是北刺杀术、伪装术、遁地术。穿越后，她是北',
  },
  {
    img: 'https://picsum.photos/id/92/100/145',
    title: '十里红妆：明妧传',
    text: '穿越是门技术活，宅斗凭的是演技。她携绝世医术而来，人不犯我我不犯人。奈何左有狠毒叔母，右有伪善不犯我我不犯人。奈何左有狠毒叔母，右有伪善不犯我我不犯人。奈何左有狠毒叔母，右有伪善',
  },
  {
    img: 'https://picsum.photos/id/93/100/145',
    title: '帝王燕：王妃有药',
    text: '她是绝世无双的药学天才，手握药王宝鼎，一朝穿越，竟成御药房最卑微的小药奴。医师刁难，公主欺辱，御药房最卑微的小药奴。医师刁难，公主欺辱，御药房最卑微的小药奴。医师刁难，公主欺辱，',
  },
];
const dataList10 = [
  '穿成兽世万人嫌，雄性们都抢疯了',
  '成为绣弦后，我把国公爷盘活了',
  '新婚假死另娶，我兼挑两房你哭什么',
  '呸！被全族抛弃后，我带爹',
  '儿孙不孝？穿成农家老妇我',
  '让我当陪嫁？呵呵，全家都跪下',
  '你穿金戴银，闺蜜双穿我',
  '穿荒年：超癫夫妇整顿全村',
  '疯了！快递通古今，娇养将',
  '兼挑两房，小叔子和我儿孙',
  '为奴三年，不原谅！整个侯',
  '长公主都重生了，刀个亲夫',
  '有孕姨娘逼我承宠？勾上权',
  '凤倾九宸',
];
const dataList11 = [
  {
    category: '最新签约',
    list: [
      { text: '《嫡女貌美人恶，世子他超爱的》', index: '01', img: 'https://picsum.photos/id/61/50/70', auth: '忘难之', type: '宫闱宅斗' },
      { text: '新婚守寡，我跟着小叔子吃香喝辣', index: '02' },
      { text: '新婚假死另娶，我兼挑两房你哭什么', index: '03' },
      { text: '成为绣弦后，我把国公爷盘活了', index: '04' },
      { text: '穿成兽世万人嫌，雄性们都抢疯了', index: '05' },
      { text: '长公主都重生了，刀个亲夫算什么', index: '06' },
      { text: '完蛋！她养的小白脸竟是摄政王', index: '07' },
      { text: '为奴三年，不原谅！整个侯府悔断肠', index: '08' },
      { text: '凤倾九宸', index: '09' },
      { text: '父子齐跪求原谅？滚，挡我震边关了', index: '10' },
      { text: '兼挑两房，小叔子和我儿孙满堂了', index: '11' },
    ],
  },
  {
    category: '最新入库',
  },
];
</script>
<style scoped></style>